<script setup>
import {updateShouhou,delShouhou} from "@/api/orders/shouhou"
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
const route = useRoute();
import{useRouter} from "vue-router";
const router = useRouter()
const { proxy } = getCurrentInstance()
// 获取查询参数
const rowData = reactive({ ...route.query });
const shouhouList= ref([])
const open = ref(false)
// 解析 order 字段
if (rowData.order) {
  try {
    rowData.order = JSON.parse(rowData.order);
  } catch (error) {
    console.error('解析 order 数据失败:', error);
  }
}
// 把 rowData 的值转换后传给 shouhouList
onMounted(() => {
  if (rowData.order) {
    // 提取需要的数据
    const actualPayment = parseFloat(rowData.order.actualPayment) || 0;
    const emsPrice = parseFloat(rowData.order.emsPrice) || 0;
    // 计算商品总额
    const actualPayment1 = actualPayment + emsPrice;
    const item = {
      productImage: rowData.productImage || '',
      productName: rowData.productName || '',
      productCode: rowData.productCode || '',
      productPrice: rowData.productPrice || '',
      quantity: rowData.order.quantity || '',
      emsPrice: rowData.order.emsPrice || '',
      // 使用计算后的商品总额
      actualPayment1: actualPayment1.toString()
    };
    shouhouList.value = [item];
  }
});
console.log(rowData)
function returnBack() {
  router.back();
}
function confirmRefund() {
  open.value = true
}
function close() {
  open.value = false
}
function tuikuan(rowData) {
  const data = {
    id: rowData.id,
    actualPayment: rowData.actualPayment,
    afterSalesStatus: "退款成功"
  };
  console.log(data)
  updateShouhou(data).then(response => {
    proxy.$modal.msgSuccess("状态更新成功")
    rowData.actualPayment = rowData.actualPayment;
    rowData.afterSalesStatus = "退款成功";
  })
}
// 订单详情按钮
function confirmAfterSales(rowData) {
  const data = {
    id: rowData.id,
    afterSalesStatus: "售后中"
  };
  console.log(data)
  updateShouhou(data).then(response => {
    proxy.$modal.msgSuccess("状态更新成功")
    rowData.afterSalesStatus = "售后中";
  })
}

/** 删除按钮操作 */
function handleDelete(rowData) {
  const _ids = rowData.id || ids.value
  proxy.$modal.confirm('是否确认删除售后管理编号为"' + _ids + '"的数据项？').then(function() {
    return delShouhou(_ids)
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功")
    router.back();
  }).catch(() => {})
}
</script>

<template>
  <h3>售后状态</h3>
  <el-form ref="shouhouRef" :model="rowData" :rules="rules" label-width="80px">
    <el-form-item label="售后状态" prop="afterSalesStatus">
      <el-input v-model="rowData.afterSalesStatus" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="用户昵称" prop="userNickname">
      <el-input v-model="rowData.order.userNickname" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="用户昵称" prop="phoneNumber">
       <el-input v-model="rowData.order.phoneNumber" disabled style="width: 300px"/>
    </el-form-item>
    <h3>退款信息</h3>
    <el-form-item label="货物状态" prop="goodsStatus">
      <el-input v-model="rowData.goodsStatus" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="退款原因" prop="refundReason">
      <el-input v-model="rowData.refundReason" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="退款金额" prop="actualPayment">
      <el-input v-model="rowData.order.actualPayment" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="申请时间" prop="applicationTime">
      <el-input v-model="rowData.applicationTime" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="退款编号" prop="refundNo">
      <el-input v-model="rowData.refundNo" disabled style="width: 300px"/>
    </el-form-item>
    <el-form-item label="关联订单" prop="oId">
      <el-input v-model="rowData.oId" disabled style="width: 300px"/>
    </el-form-item>
  </el-form>
  <el-table  v-loading="loading" :data="shouhouList">
    <el-table-column prop="productImage" label="商品照片" width="180">
      <template #default="scope">
        <image-preview :src="scope.row.productImage" :width="50" :height="50"/>
      </template>
    </el-table-column>
    <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
    <el-table-column prop="productCode" label="商品编号" width="180"></el-table-column>
    <el-table-column prop="productPrice" label="商品价格" width="180"></el-table-column>
    <el-table-column prop="quantity" label="商品数量" width="180"></el-table-column>
    <el-table-column prop="emsPrice" label="邮费" width="180"></el-table-column>
    <el-table-column prop="actualPayment1" label="商品总额" width="180"></el-table-column>
  </el-table>
  <!-- 根据售后状态显示不同按钮，添加类名用于样式控制 -->
  <div class="button-container">
    <div v-if="rowData.afterSalesStatus === '待处理'">
      <el-button type="primary" class="custom-button" @click="confirmAfterSales(rowData)">确认售后</el-button>
      <el-button type="info" class="custom-button" @click="returnBack">返回</el-button>
    </div>
    <div v-else-if="rowData.afterSalesStatus === '售后中'">
      <el-button type="success" class="custom-button" @click="confirmRefund(rowData)">确认退款</el-button>
      <el-button type="info" class="custom-button" @click="returnBack">返回</el-button>
    </div>
    <div v-else-if="rowData.afterSalesStatus === '退款成功' || rowData.afterSalesStatus === '退款失败'">
      <el-button type="danger" class="custom-button" @click="handleDelete(rowData)">删除订单</el-button>
      <el-button type="info" class="custom-button" @click="returnBack">返回</el-button>
    </div>
  </div>

  <el-dialog :title="title" v-model="open" width="500px" append-to-body>
    <el-form ref="orderRef" :model="rowData" :rules="rules" label-width="80px">
      <el-form-item label="退款金额" prop="actualPayment">
        <el-input v-model="rowData.actualPayment"/>
        <p>最高可退款{{rowData.order.actualPayment}} (含邮费)￥{{rowData.order.emsPrice}}</p>
      </el-form-item>
    </el-form>
    <el-button type="danger" class="custom-button" @click="tuikuan(rowData)">确认退款</el-button>
    <el-button type="info" class="custom-button" @click="close">关闭</el-button>
  </el-dialog>

</template>

<style scoped lang="scss">
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 15px;
}

.custom-button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
  color: #333; /* 明确设置初始文字颜色，可根据需求调整 */
  border: 1px solid #ccc; /* 添加边框，方便查看按钮区域 */

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
</style>